<template>
 <div class="yingmoo-case">
    <ym-header></ym-header>
    <ym-medianav></ym-medianav>
    <ym-detailsnav></ym-detailsnav>
<!--  广告轮播  -->
    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--  案例展示  -->
    <div class="yingmoo-template-model">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">案例展示</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
        <router-link tag="dl" to="/ymCasedetails" class="media-annimation" v-for="n in list1">
          <dt>
            <img width="468px" height="307px" :src="n.imgpath" />
          </dt>
          <dd>{{n.name}}</dd>
          <dd>{{n.remark}}</dd>
        </router-link>
        <div class="content">
	        <div class="model">
	        	<ul>
	        		<li class="media-model" style="float: left;margin-left: 10px;" v-for="n in list2">
			           <dl>
			              <dt>
			                <img width="224px" height="147px" :src="n.imgpath" />
			              </dt>
			              <dd class="media-text-first" :title='n.remark'>{{n.remark}}</dd>
			           </dl>
	        		</li>
	        	</ul>
	        </div>
        </div>
      </div>
      
      <div class="column-content">
        <dl class="media-annimation" v-for="n in list3">
          <dt>
            <img width="468px" height="307px" :src="n.imgpath" />
          </dt>
          <dd>{{n.name}}</dd>
          <dd>{{n.remark}}</dd>
        </dl>
        
        <div class="content">
	        <div class="model">
	           <ul>
	        		<li class="media-model" style="float: left;margin-left: 10px;" v-for="n in list4">
			           <dl>
			              <dt>
			                <img width="224px" height="147px" :src="n.imgpath" />
			              </dt>
			              <dd class="media-text-first" :title='n.remark'>{{n.remark}}</dd>
			           </dl>
	        		</li>
	        	</ul>
	        </div>
        </div>
      </div>
      
      <div class="column-content">
        <dl class="media-annimation" v-for="n in list5">
          <dt>
            <img width="468px" height="307px" :src="n.imgpath" />
          </dt>
          <dd>{{n.name}}</dd>
          <dd>{{n.remark}}</dd>
        </dl>
        
        <div class="content">
	        <div class="model">
	           <ul>
	        		<li class="media-model" style="float: left;margin-left: 10px;" v-for="n in list6">
			           <dl>
			              <dt>
			                <img width="224px" height="147px" :src="n.imgpath" />
			              </dt>
			              <dd class="media-text-first" :title='n.remark'>{{n.remark}}</dd>
			           </dl>
	        		</li>
	        	</ul>
	        </div>
        </div>
      </div>
      
      <div class="column-content">
        <dl class="media-annimation" v-for="n in list7">
          <dt>
            <img width="468px" height="307px" :src="n.imgpath" />
          </dt>
          <dd>{{n.name}}</dd>
          <dd>{{n.remark}}</dd>
        </dl>
        
        <div class="content">
	        <div class="model">
	           <ul>
	        		<li class="media-model" style="float: left;margin-left: 10px;" v-for="n in list8">
			           <dl>
			              <dt>
			                <img width="224px" height="147px" :src="n.imgpath" />
			              </dt>
			              <dd class="media-text-first" :title='n.remark'>{{n.remark}}</dd>
			           </dl>
	        		</li>
	        	</ul>
	        </div>
        </div>
      </div>
      
      <div class="column-content">
        <dl class="media-annimation" v-for="n in list9">
          <dt>
            <img width="468px" height="307px" :src="n.imgpath" />
          </dt>
          <dd>{{n.name}}</dd>
          <dd>{{n.remark}}</dd>
        </dl>
        
        <div class="content">
	        <div class="model">
	           <ul>
	        		<li class="media-model" style="float: left;margin-left: 10px;" v-for="n in list10">
			           <dl>
			              <dt>
			                <img width="224px" height="147px" :src="n.imgpath" />
			              </dt>
			              <dd class="media-text-first" :title='n.remark'>{{n.remark}}</dd>
			           </dl>
	        		</li>
	        	</ul>
	        </div>
        </div>
      </div>
    </div>
<!--  分页器  -->
<!--
    <div class="paging">
      <el-pagination
        :page-size="10"
        background
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>
-->

    <ym-detailsfooter></ym-detailsfooter>
 </div>
</template>
<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymDetailsfooter from "@/components/ymDetailsfooter.vue";
  import ymDetailsnav from "@/components/ymDetailsnav.vue";
  export default {
    name: "yingmoo-case",
    components: {
      ymHeader,
      ymMedianav,
      ymDetailsnav,
      ymDetailsfooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        banners: [{
          imgUrl: require('@/assets/ym-case/case-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-media/feature-lunbo.png')
        }, {
          imgUrl: require('@/assets/ym-case/case-lunbo.png')
        }],
        template: [{
          templatetext: '媒体名称媒体名称媒体名称',
          templatemoney: '价格：120万 元/年',
          templatecity: '北京西站',
          templatelook: '看板'
        }, {
          templatetext: '媒体名称媒体名称媒体名称',
          templatemoney: '价格：120万 元/年',
          templatecity: '北京西站',
          templatelook: '看板'
        }, {
          templatetext: '媒体名称媒体名称媒体名称',
          templatemoney: '价格：120万 元/年',
          templatecity: '北京西站',
          templatelook: '看板'
        }],
        list1:[],
        list2:[],
        list3:[],
        list4:[],
        list5:[],
        list6:[],
        list7:[],
        list8:[],
        list9:[],
        list10:[]
      }
    },
    mounted(){
    	this.getList(209,3);
    	this.getList(198,1);
    	this.getList(199,6);
    	this.getList(200,1);
    	this.getList(201,6);
    	this.getList(202,1);
    	this.getList(203,6);
    	this.getList(204,1);
    	this.getList(205,6);
    	this.getList(206,1);
    	this.getList(207,6);
    },
    methods:{
	    getList:function(adid ,limit){
	  		this.$http({
				url: this.requestAddr+'/GetJson/get/adshow?adid='+adid+"&limit="+limit,
				method: 'JSONP',
			    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				jsonp: 'callbackparam'
			}).then(res => {
				/*console.log(res.data);*/
				if(res.data != null){
					if(adid == 209){this.banners = res.data;}
					if(adid == 198){this.list1 = res.data;}
					if(adid == 199){this.list2 = res.data;}
					if(adid == 200){this.list3 = res.data;}
					if(adid == 201){this.list4 = res.data;}
					if(adid == 202){this.list5 = res.data;}
					if(adid == 203){this.list6 = res.data;}
					if(adid == 204){this.list7 = res.data;}
					if(adid == 205){this.list8 = res.data;}
					if(adid == 206){this.list9 = res.data;}
					if(adid == 207){this.list10 = res.data;}
				}
			}).catch()
    	}
	}
  }
</script>

<style scoped lang="less">
  .yingmoo-case {
    background-color: #f3f9ff;
    .ym-lunbo {
      width: 100%;
      height: 450px;
      img{
        height: 451px;
      }
    }
    .yingmoo-template-model {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
      }
      .column-content {
        width: 1200px;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        .media-annimation {
          height: 391px;
          margin-top: 20px;
          background-color: white;
          dd {
            font-size: 20px;
            color: #333333;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
            &:nth-child(2) {
              margin-top: 7px;
            }
            &:nth-child(3) {
              font-size: 14px;
              line-height: 30px;
              color: #999999;
              font-weight: 100;
            }
          }
        }
        .content {
          width: 711px;
          height: 391px;
          .model {
            display: flex;
            justify-content: space-between;
            .media-model {
              width: 224px;
              height: 185px;
              margin-top: 20px;
              background-color: white;
              dd {
                background-color: white;
                height: 24px;
                line-height: 24px;
              }
              .media-text-first {
                font-size: 15px;
                padding-top: 5px;
                text-align: center;
                overflow: hidden;
                text-overflow: clip;
              }
            }
            .media-modelt {
              width: 224px;
              height: 185px;
              margin-top: 20px;
              background-color: white;
              dd {
                background-color: white;
                height: 24px;
                line-height: 24px;
                padding-left: 10px;
              }
              .media-text-first {
                font-size: 15px;
                padding-top: 9px;
              }
              .media-text-secend {
                font-size: 12px;
                color: #f29600;
              }
              .media-text-city {
                font-size: 12px;
                color: #999999;
                padding-bottom: 6px;
                span {
                  padding-left: 15px;
                }
              }
            }
          }
        }
      }
    }
    .paging {
      width: 1200px;
      height: 35px;
      margin: 23px auto;
      text-align: center;
    }
  }

</style>
